<template>
	<view class="fabBox">
		<view class="fab" @click="show = !show">
			<uni-icons :type="!show ? 'plusempty' : 'closeempty'" size="30" color="#fff" />
		</view>
		<view class="fabList">
            <template v-for="(item, i) in props.data" :key="i">
                <view class="fabItem" 
                    :style="{
                        opacity: !show ? 0 : 1,
                        background: item.color || '#2196F3'
                    }"
                    v-if="item.show"
                    @click="onClick(item.value)">
                    <uni-icons :type="item.icon" size="24" color="#fff" />
                    <text class="text">{{ item.text }}</text>
                </view>
            </template>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, defineEmits, defineExpose } from 'vue';

const props = defineProps({
	// 是否有筛选
	data: {
		type: Array,
		default: []
	},
});
// 变量
const show = ref(false);
// emit
const emit = defineEmits(['itemClick']);
// 方法
const onClick = (t) => {
	emit('itemClick', t);
};
// 生命周期
onMounted(() => {
	
});
onUnmounted(() => {
	
});
// 抛出
defineExpose({
	
});
</script>

<style lang="scss" scoped>

.fabBox {
    position: fixed;
    right: 32rpx;
    bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom) + 60rpx);
    bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom) + 60rpx);
    z-index: 1;
    .fab {
        width: 100rpx; 
        height: 100rpx; 
        border-radius: 50%; 
        background-color: #007aff; 
        display: flex; 
        align-items: center; 
        justify-content: center;
        user-select: none;
        touch-action: none;
        &:active {
            color: hsla(0, 0, 100%, .6);
            background: #0062cc;
        }   
    }
    .fabList {
        padding: 32rpx 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
        position: absolute;
        left: 0;
        bottom: 100%;
        .fabItem {
            width: 80rpx; 
            height: 80rpx; 
            margin: 10rpx;
            border-radius: 50%; 
            box-shadow: 0 0 30rpx -6rpx #000;
            transition-delay: 0.05s; 
            transition: .3s cubic-bezier(.25,.8,.5,1);
            display: flex; 
            align-items: center; 
            justify-content: center;
            flex-direction: column;
            .text {
                color: #fff;
                font-size: 20rpx;
                line-height: 1;
            }
        }
    }
}
</style>
